<template>
    <EChart width="30%" :options="options"/>
</template>

<script setup lang="ts">
import {EChartsOption} from 'echarts';
import {getCipData} from '@/api/country';
import NameMap from '@/api/country/BaseData/NameMap';
import EChart from "@/components/EChart";

const props = defineProps<{ countryName: string }>();
const options = reactive<EChartsOption>({
    title: {
        text: `通货膨胀-${NameMap[props.countryName]}`,
    },
    xAxis: {
        type: 'category',
        data: [],
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            type: 'line',
            data: [],
        },
    ],
});
onMounted(() => {
    options.xAxis!['data'] = getCipData(props.countryName).xYear;
    options.series![0]['data'] = getCipData(props.countryName).yCpi;
});
</script>

<style scoped lang="scss">

</style>
